<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 主体样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 图标字体库 -->
    <link rel="stylesheet" href="../font/iconfont.css" />
    <link rel="stylesheet" href="../css/pruduct.css">
</head>

<body>
    <!-- 页面头部 -->
    <header>
        <div class="head_list1">
            <div class="center_list1">
                <span><a href="#">DJI 大疆官网</a></span>
                <span>满 ¥99 顺丰包邮。热门主机使用花呗，京东白条和招行分期最高可享 3 期免息，下单即享 1% DJI币返点。</span>
                <ul class="top_right clearfix">
                    <li class="shop_car"><a href="#">
                            <span class="iconfont">&#xe707;</span>
                            <span>购物车</span>
                            <span class="num">0</span></a></li>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="">中国大陆(简体中文/￥CNY)</a></li>
                </ul>
            </div>

        </div>
        <div class="head_list2 ">
            <ul class="center_list2">
                <li><a href="#">
                        <div class="logo">
                            <span class="iconfont">&#xe6f7;</span>
                            <span>商城</span>
                        </div>
                    </a></li>
                <li><a href="#">商品分类
                        <span class="iconfont">&#xe731;</span>
                    </a></li>
                <li><a href="#">以旧换新</a></li>
                <li><a href="#">购机指南</a></li>
                <li><a href="#">DJI 大疆商城 APP</a></li>
                <li>
                    <form action="#">
                        <input type="text" name="search" placeholder="搜索商品..." />
                        <span class="iconfont iconsousuo"></span>
                    </form>
                </li>
            </ul>


        </div>
    </header>
    <!-- 商品内容 -->
    <div class="product clearfix">
        <!-- 商品路径 -->
        <ul class="product_link clearfix">
            <li class=""><a href="#">商城首页</a></li>
            <li class=""><a href="#">御 Mavic 系列</a></li>
            <li class=""><a href="#">御 Mavic Air 2</a></li>
            <li class="">御 Mavic Air 2 智能飞行电池</li>
        </ul>
        <!-- 商品信息 -->
        <div class="product_container">
            <div class="product_container_left">
                <div class="product_show">
                    <img src="https://product2.djicdn.com/uploads/carousel/image/96fa1f3f8f040798f792b1600a80b1e3@ultra.jpg"
                        alt="">
                    <img src="https://product1.djicdn.com/uploads/carousel/image/3c79a2e819cf7239587cc062f0da64e2@ultra.jpg"
                        alt="">
                    <img src="https://product1.djicdn.com/uploads/carousel/image/748df6a18342503ab590b931327b10d9@ultra.jpg"
                        alt="">
                    <img src="https://product4.djicdn.com/uploads/carousel/image/3c6bac65077972b3584e855dbe3e85d1@ultra.jpg"
                        alt="">
                    <img src="https://product1.djicdn.com/uploads/carousel/image/1f50ce8b01a883d94fb6a5198fbcfeb6@ultra.jpg"
                        alt="">
                    <img src="https://product2.djicdn.com/uploads/carousel/image/ca5dea0049858e1e1e7f545e3c80770c@ultra.jpg"
                        alt="">
                </div>
                <div>
                    <img src="https://product2.djicdn.com/uploads/carousel/image/96fa1f3f8f040798f792b1600a80b1e3@ultra.jpg"
                        alt="">
                    <img src="https://product1.djicdn.com/uploads/carousel/image/3c79a2e819cf7239587cc062f0da64e2@ultra.jpg"
                        alt="">
                    <img src="https://product1.djicdn.com/uploads/carousel/image/748df6a18342503ab590b931327b10d9@ultra.jpg"
                        alt="">
                    <img src="https://product4.djicdn.com/uploads/carousel/image/3c6bac65077972b3584e855dbe3e85d1@ultra.jpg"
                        alt="">
                    <img src="https://product1.djicdn.com/uploads/carousel/image/1f50ce8b01a883d94fb6a5198fbcfeb6@ultra.jpg"
                        alt="">
                    <img src="https://product2.djicdn.com/uploads/carousel/image/ca5dea0049858e1e1e7f545e3c80770c@ultra.jpg"
                        alt="">
                </div>
            </div>
            <div class="product_container_right">
                <h2>DJI Mini 2</h2>
                <span class="product_price">￥ <i>2899</i></span><br>
                <span class="postage">邮费：<i>免费配送</i></span>
                <ul>
                    <li>&lt;249g</li>
                    <li>4K/30fps视频</li>
                    <li>10 公里高清图传</li>
                    <li>最大抗风等级 5 级</li>
                    <li>4 倍变焦</li>
                    <li>手机快传</li>
                </ul>
                <div class="product_count">
                    <input type="text" value="1">
                    <div>
                        <span>+</span>
                        <span>-</span>
                    </div>
                    <div class='join_shopcar'>加入购物车</div>
                    
                </div>
               <div class="delivery_time">预计发货时间:订单付款后1个工作日</div>
            </div>
        </div>
        <!-- 商品概览 -->
        <div class="product_summary">
            <h3>产品概览</h3>
            <div><img src="http://127.0.0.1:5500/code/dji-dist/imgs/detail/DJI%20Mini%202.jpg" alt=""></div>
        </div>

    </div>


    <footer class="clearfix">
        <ul class="sever ">
            <li>
                <div><img src="http://localhost:52330/code/dji-dist/imgs/truck-moving.svg" alt="">
                </div> <span>全场满 ¥99 顺丰包邮<br>（顺丰无法配送的区域将使用 EMS）</span>
            </li>
            <li>
                <div><img src="../imgs/credit-card.svg" alt="">
                </div>
                <span>支持支付宝、微信、银联、银行转账<br>支持花呗、京东白条和招行分期</span>
            </li>
            <li>
                <div><img src="../imgs/comment-alt-smile.svg" alt=""></div>
                <span>邮箱：<a href="support@dji.com">support@dji.com</a></span>
            </li>
            <li>
                <div><img src="../imgs/newGovIcon.gif" alt=""></div>
            </li>
        </ul>
        <!-- 頁脚鏈接 -->
        <div class="link_box">
            <ul>
                <li>商城热卖</li>
                <li><a href="#"> "御" Mavic</a></li>
                <li><a href="#"> "晓" Spark</a></li>
                <li><a href="#"> 精灵 Phantom</a></li>
                <li><a href="#"> 灵眸 Osmo</a>/li>
                <li><a href="#"> "悟" Inspire</a></li>
                <li><a href="#"> 如影 Ronin</a></li>
            </ul>
            <ul>
                <li>购买指南</li>
                <li><a href="#"> 支付方式</a></li>
                <li><a href="#"> 订单帮助</a></li>
                <li><a href="#"> 发货和物流</a></li>
                <li><a href="#"> 退换货条款</a></li>
                <li><a href="#"> 技术支持</a></li>
                <li><a href="#"> 售后服务政策</a></li>
                <li><a href="#"> DJI币返利计划</a></li>
            </ul>
            <ul>
                <li>商城项目</li>
                <li><a href="#"> 以旧换新</a></li>
                <li><a href="#"> DJI大疆商城App</a></li>
            </ul>

            <ul>
                <li>社区</li>
                <li><a href="#"> 天空之城</li>
                <li><a href="#"> DJI大疆社区</a></li>
                <li><a href="#"> 购机指南</a></li>
            </ul>
            <ul>
                <li>订阅</li>
                <li>第一时间了解我们的促销活动、热销产品和最新信息。</li>
                <li class="email_link">
                    <input type="text" placeholder="请输入您的邮箱"><span>&gt;</span>
                </li>
            </ul>
        </div>
        <!-- 脚下link1 -->
        <div class="footer_link1 clearfix">
            <div class="footer_link1_left">
                <i class="iconfont">&#xe6f7;</i>
                <a href="">关于我们</a>
                <a href="">联系我们</a>
                <a href="">招聘精英</a>
                <a href="">官方旗舰店</a>
            </div>
            <div class="footer_link1_right">
                <a href="#"><i class="iconfont youku">&#xe69a;</i></a>
                <a href="#"><i class="iconfont ">&#xe63e;</i></a>
                <a href="#"><i class="iconfont">&#xe605;</i></a>
            </div>
        </div>

        <!-- 脚下link2  -->
        <div class="footer_link2 clearfix">
            <div class="footer_link2_left">
                <span>Copyright © 2021 DJI 大疆创新 版权所有</span>
                <a href="#">隐私权政策</a><i>·</i>
                <a href="#">使用条款</a><i>·</i>
                <a href="#">粤ICP备12032134号-11</a><i>·</i>
                <a href="#">营业执照</a><i>·</i>
                <a href="#">网站地图</a>
            </div>
            <div class="footer_link2_right">网站问题反馈？<a href="#">点击这里</a></div>
        </div>
    </footer>
    <!-- 两个按钮 回到顶部 客服 -->
    <div class="use">
        <a href="#">
            <div><i class="iconfont">&#xe730;</i></div>
        </a>
        <a href="#">
            <div><i class="iconfont">&#xe651;</i></div>
        </a>
    </div>


</body>

</html>